<style>
	.checkboxFive {
		width: 25px;
		float: left;
		position: relative;
		margin: 10px;
	}
	.checkboxFive label {
		cursor: pointer;
		position: absolute;
		width: 25px;
		height: 25px;
		top: 0;
		left: 0;
		background: #eee;
		border: 1px solid #ddd;
	}
	.checkboxFive label:after {
		opacity: 0.2;
		content: '';
		position: absolute;
		width: 9px;
		height: 5px;
		background: transparent;
		top: 6px;
		left: 7px;
		border: 3px solid #333;
		border-top: none;
		border-right: none;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.checkboxFive label:hover::after {
		opacity: 0.5;
	}
	.checkboxFive input[type=checkbox]:checked + label:after {
		opacity: 1;
	}
	.circle {
		border: solid 1px #ced4da;
		height: 38px;
		width: 40px;
	}
	.circle a {
	    cursor: pointer;
	}
	.circle_inner_play {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 0 10px 20px;
		border-color: transparent transparent transparent #212529;
		position: absolute;
		top: 50%;
		right: 2%;
		margin: -13px 0 0 -7px;
	}
	.circle_inner_pause {
		position: absolute;
		top: 8px;
		right: 14px;
		font-size: 13px;
	}


</style>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 800px;top: 95px;">
        <div class="modal-content">
            <div class="modal-header" style="background: #dc3545;color: #fff;">
                <h4 class="modal-title" id="myModalLabel">添加闹钟</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
			<form id="clock_data" action="">
            <div class="modal-body">
				<div class="form-group xs-mb-0 sm-mb-5">
					<label for="edt-title">标题</label>
					<input class="form-control" id="edt-title" name="title" value="闹钟">
				</div>
				<div class="row" style="padding:0 20px;">
					<div class="form-group col-xs-6" style="width:30%;float:left;margin-right:20px;">
					  <label for="edt-year">年</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="year" id="edt-year">
							
						</select>
					  </div>
					</div>
					<div class="form-group col-xs-6" style="width:30%;float:left;margin-right:20px;">
					  <label for="edt-month">月</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="month" id="edt-month"></select>
					  </div>
					</div>
					<div class="form-group col-xs-6" style="width:29%;float:left;margin-right:20px;">
					  <label for="edt-day">日</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="day" id="edt-day"></select>
					  </div>
					</div>
					<div class="form-group col-xs-6" style="width:46%;float:left;margin-right:20px;">
					  <label for="edt-hour">小时</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="huor" id="edt-hour">></select>
					  </div>
					</div>
					<div class="form-group col-xs-6"style="width:46%;float:left;margin-right:20px;">
					  <label for="edt-minute">分钟</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="minute" id="edt-minute"></select>
					  </div>
					</div>
				</div>
				  <div class="row" id="group-audio">
					<div class="form-group col-xs-8 col-sm-7">
					  <label for="edt-audio">声音</label>
					  <div class="input-group xs-mb-0">
						<select class="form-control" name="audio_id" id="edt-audio">
							{foreach $mediaList as $key => $val}
								<option value="{$val['id']}" data-path="{$val['sour_path']}">{$val['item']}</option>
							{/foreach}
						</select>
						<label id="playBtn" class="circle">
							<a class="circle_inner_play" data-type="play" id="media_play"></a>
						</label>
					  </div>
					</div>
					<div class="form-group col-xs-4 col-sm-5 xs-pl-0 sm-pl-15">
					  <div class="am-checkbox am-checkbox-form" style="padding-top: 28px;">
						<div class="checkboxFive">
							<input type="checkbox" value="1" id="repeat" name="repeat" />
							<label for="repeat"></label>
						</div>
						<p class="text-ellipsis" style="padding-top: 9px;">重复声音</p>
					  </div>
					</div>
				  </div>
				</div>
			</form>
            <div class="modal-footer">
                <button type="button" id="add" class="btn btn-primary">开始</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
	<audio id="audio" src=""></audio>

</div>

<script type="text/javascript">
	$(function(){
		var date = new Date();

		setOption('#edt-year',date.getFullYear(),'2050','');
		setOption('#edt-month','1','12',date.getMonth() + 1);
		setOption('#edt-day','1','32',date.getDate());
		setOption('#edt-hour','0','23',date.getHours());
		setOption('#edt-minute','0','59',date.getMinutes());

	});
	
	function setOption(selector,min,max,usua=''){
		
		var text = '';
		
		for (i = min; i <= max; i++) { 
			text += "<option value=" + check(i) + ">" + check(i) + "</option>";
		}
		$(selector).html(text);
		if(usua != ''){
			var op_selector = selector + " option[value="+ check(usua) +"]";
			$(op_selector).attr("selected",true);
		}
	}
	
	function check(val) {
		if (val < 10) {
			return ("0" + val);
		} 
		else {
			return (val);
		}
	}
	
	$('#add').on('click',function() {
		var data = $('form').serializeArray();
		var url = '/index/clock/addClock';
		$.ajax({
			type: "POST",
			url: url,
			dataType: "json",
			data: data,
			success: function(data){
				$('.alert').text(data.msg);
				$('.modal-backdrop').hide();
				$('.modal').hide();
				$('.alert').show();
				setTimeout(function(){
					window.location.reload();
				},1500);

			}
		});
	});

	$('#media_play').on('click', function() {
		//获取媒体
		var audioEle = $('#audio')[0];
		audioEle.src = '/'+$('#edt-audio').data('path');
		audioEle.load();
		
		var type = $(this).data('type');
		if(type == 'play'){
			audioEle.play();   //播放
			$(this).removeAttr("class","circle_inner_play");
			$(this).attr("class","circle_inner_pause");
			$(this).html("▐▐");
			$(this).data('type','out');
		}else{
			audioEle.pause();  //暂停
			$(this).removeAttr("class","circle_inner_pause");
			$(this).attr("class","circle_inner_play");
			$(this).html("");
			$(this).data('type','play');
		}
		
	});
</script>